<template>
  <el-table :data="list" style="width: 100%" class="">
    <el-table-column prop="id" label="序号" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="age" label="年龄" />
    <el-table-column prop="phone" label="手机号" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column prop="address" label="城市" />
    <el-table-column prop="createTime" label="日期" />
    <el-table-column label="编辑/删除">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import Mock from 'mockjs';

const { newsList } = Mock.mock({
  "newsList|75": [
    {
      'id': "@increment",
      'name': '@cname',
      'age|18-40': 0,
      'phone': /^1[0-9]{10}$/,
      'email': '@email',
      'address': '@county(true)',
      'createTime': '@date("yyyy-MM-dd")',
    },
  ],
});
console.log("newsList", newsList);
const list = newsList

const handleEdit = (index,row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}
</script>

<style lang="scss" scoped>

</style>